  <template>
  <div style="display: flex;flex-direction: column;height: 100%;">
    <dv-border-box-12 :color="['#025d6d']" style="flex: 1;overflow-y: hidden;">
      <div style="padding: 5px 10px;overflow-y: auto;height: calc(100% - 15px);">
        <el-table fit :data="tableData" style="width: 100%;margin:0 auto; "
          :header-row-style="{fontSize:'13px',color:'white'}"
          :row-style="{fontSize:'13px',color:'white'}">
          <el-table-column prop="compName" label="企业名称" width="260px" align="left">

          </el-table-column>
          <el-table-column prop="" label="1月" align="center">
            <el-table-column prop="score11" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score12" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score12 < scope.row.score11"
                  style="background-color: brown;color: white;">{{scope.row.score12}}</div>
                <div v-else>{{scope.row.score12}}</div>
              </template>

            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="2月" align="center">
            <el-table-column prop="score21" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score22" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score22 < scope.row.score21"
                  style="background-color: brown;color: white;">{{scope.row.score22}}</div>
                <div v-else>{{scope.row.score22}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="3月" align="center">
            <el-table-column prop="score31" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score32" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score32 < scope.row.score31"
                  style="background-color: brown;color: white;">{{scope.row.score32}}</div>
                <div v-else>{{scope.row.score32}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="4月" align="center">
            <el-table-column prop="score41" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score42" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score42 < scope.row.score41"
                  style="background-color: brown;color: white;">{{scope.row.score42}}</div>
                <div v-else>{{scope.row.score42}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="5月" align="center">
            <el-table-column prop="score51" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score52" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score52 < scope.row.score51"
                  style="background-color: brown;color: white;">{{scope.row.score52}}</div>
                <div v-else>{{scope.row.score52}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="6月" align="center">
            <el-table-column prop="score61" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score62" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score62 < scope.row.score61"
                  style="background-color: brown;color: white;">{{scope.row.score62}}</div>
                <div v-else>{{scope.row.score62}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="7月" align="center">
            <el-table-column prop="score71" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score72" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score72 < scope.row.score71"
                  style="background-color: brown;color: white;">{{scope.row.score72}}</div>
                <div v-else>{{scope.row.score72}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="8月" align="center">
            <el-table-column prop="score81" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score82" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score82 < scope.row.score81"
                  style="background-color: brown;color: white;">{{scope.row.score82}}</div>
                <div v-else>{{scope.row.score82}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="9月" align="center">
            <el-table-column prop="score91" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score92" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score92 < scope.row.score91"
                  style="background-color: brown;color: white;">{{scope.row.score92}}</div>
                <div v-else>{{scope.row.score92}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="10月" align="center">
            <el-table-column prop="score101" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score102" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score102 < scope.row.score101"
                  style="background-color: brown;color: white;">{{scope.row.score102}}</div>
                <div v-else>{{scope.row.score102}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="11月" align="center">
            <el-table-column prop="score111" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score112" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score112 < scope.row.score111"
                  style="background-color: brown;color: white;">{{scope.row.score112}}</div>
                <div v-else>{{scope.row.score112}}</div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="" label="12月" align="center">
            <el-table-column prop="score121" label="发现" min-width="45px" align="center">
            </el-table-column>
            <el-table-column prop="score122" label="整改" min-width="45px" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.score122 < scope.row.score121"
                  style="background-color: brown;color: white;">{{scope.row.score122}}</div>
                <div v-else>{{scope.row.score122}}</div>
              </template>
            </el-table-column>
          </el-table-column>

        </el-table>

      </div>
    </dv-border-box-12>

    <div style="height:350px;">

      <el-row :gutter="10" style="height: 100%;">
        <el-col :span="24" style="height:100%;overflow-y: hidden;">
          <dv-border-box-10 :color="['#025d6d']" style="flex: 1;">
            <div style="height: 100%;display: flex;">
              <!-- <div style="width: 260px;"></div> -->
              <div style="height:100%;flex: 1;" ref="echarts1"> </div>
            </div>
          </dv-border-box-10>
        </el-col>

        <el-col :span="8" style="height:100%;overflow-y: hidden;display: none;">
          <dv-border-box-10 :color="['#025d6d']" style="flex: 1;">
            <div style="height: 100%;position: relative;">
              <div style="height:100%;" ref="echarts2"> </div>
            </div>
          </dv-border-box-10>
        </el-col>

      </el-row>

    </div>

  </div>

</template>
  <script>
// import Charts from '@jiaminghi/charts';
import pieOption1 from './charts/bar2';
import { tableData } from './data';
import lineOption1 from './charts/line1';
import CheckMark from '@/components/checkMark';
import { queryCompDangerList } from '@/service/compDanger';
export default {
  components: { CheckMark },
  data() {
    return {
      loading: true,
      tableHeight: 650,
      value: '1',
      tableData,
      config: {
        indexHeader: '序号',
        // oddRowBGC: 'green', // 奇数行背景色
        // evenRowBGC: '#000', // 偶数行背景色
        // headerBGC: '#eb5a6d', // 表头背景色
        header: ['领导', ''],
        rowNum: 15, // 表行数
        index: true,
        headerHeight: 50,
        carousel: 'single',
        columnWidth: [50, 300],
        waitTime: 1500, // 轮播时间间隔(ms)
        align: ['center', 'center'],
        tableData: [],

        data: [
          // ["<span style='cursor:pointer'>上海市</span>", 1111],
          // ["<span style='cursor:pointer'>北京市</span>", '伟大的劳动人民'],
          // ["<span style='cursor:pointer'>广西壮族自治区</span>", 9098],
          // ["<span style='cursor:pointer'>广东省</span>", 8909099],
          // [
          //   "<span style='cursor:pointer'>东北三省</span>",
          //   "<span style='color:yellow'>吉林省、黑龙江省、辽宁省</span>",
          // ],

          [
            '有很多活动写不完',
            "<span class='point-class' style='color: #08C887;'><i class='el-icon-edit'></i></sapn>",
          ],
        ],
      },
      option1: {},
    };
  },
  methods: {
    initCharts() {
      this.myChart1 = this.$echarts.init(this.$refs.echarts1);
      this.myChart2 = this.$echarts.init(this.$refs.echarts2);
      const vm = this;
      window.onresize = function () {
        //自适应大小
        vm.myChart1.resize();
        vm.myChart2.resize();
      };
    },
    getNotNullVal(val) {
      if (!val) {
        return 0;
      }

      return val;
    },
    loadCharts() {
      const tableData = this.tableData.filter(item=>item.isHouseOwner != 'Y')
      const score11 = tableData
        .map((item) => this.getNotNullVal(item.score11))
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score21 = tableData
        .map((item) => this.getNotNullVal(item.score21))
        .filter((item) => item != null)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score31 = tableData
        .map((item) => this.getNotNullVal(item.score31))
        .filter((item) => item != null)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score41 = tableData
        .map((item) => this.getNotNullVal(item.score41))
        .filter((item) => item != null)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score51 = tableData
        .map((item) => this.getNotNullVal(item.score51))
        .filter((item) => item != null)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score61 = tableData
        .map((item) => this.getNotNullVal(item.score61))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score71 = tableData
        .map((item) => this.getNotNullVal(item.score71))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score81 = tableData
        .map((item) => this.getNotNullVal(item.score81))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score91 = tableData
        .map((item) => this.getNotNullVal(item.score91))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score101 = tableData
        .map((item) => this.getNotNullVal(item.score101))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score111 = tableData
        .map((item) => this.getNotNullVal(item.score111))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score121 = tableData
        .map((item) => this.getNotNullVal(item.score121))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);

      const score12 = tableData
        .map((item) => this.getNotNullVal(item.score12))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score22 = tableData
        .map((item) => this.getNotNullVal(item.score22))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score32 = tableData
        .map((item) => this.getNotNullVal(item.score32))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score42 = tableData
        .map((item) => this.getNotNullVal(item.score42))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score52 = tableData
        .map((item) => this.getNotNullVal(item.score52))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score62 = tableData
        .map((item) => this.getNotNullVal(item.score62))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score72 = tableData
        .map((item) => this.getNotNullVal(item.score72))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score82 = tableData
        .map((item) => this.getNotNullVal(item.score82))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score92 = tableData
        .map((item) => this.getNotNullVal(item.score92))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score102 = tableData
        .map((item) => this.getNotNullVal(item.score102))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score112 = tableData
        .map((item) => this.getNotNullVal(item.score112))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      const score122 = tableData
        .map((item) => this.getNotNullVal(item.score122))
        .filter((item) => item)
        .reduce((o1, o2) => parseInt(o1) + parseInt(o2), 0);
      lineOption1.series[0].data = [
        score11,
        score21,
        score31,
        score41,
        score51,
        score61,
        score71,
        score81,
        score91,
        score101,
        score111,
        score121,
      ];
      lineOption1.series[1].data = [
        score12,
        score22,
        score32,
        score42,
        score52,
        score62,
        score72,
        score82,
        score92,
        score102,
        score112,
        score122,
      ];
      this.myChart1.setOption(lineOption1);

      this.myChart2.setOption(pieOption1);
    },
    clickItem(compny_name) {
      console.log('compny_name', compny_name);
    },
    async loadData() {
      const res = await queryCompDangerList({});
      this.tableData = res.dataList;

      console.log('res.dataList', res.dataList);

      this.loadCharts();
    },
  },

  mounted() {
    const vm = this;
    this.loadData();
    this.initCharts();
  },
};
</script>
<style scoped>
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td,
::v-deep .el-table th.el-table__cell {
  background-color: transparent;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  /* border-bottom: 0; */
}

::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}
::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

::v-deep .el-table thead.is-group th.el-table__cell {
  background-color: transparent !important;
}

::v-deep .el-table td.el-table__cell div {
  height: 35px;
  line-height: 35px;
}

.el-table .cell {
  padding-left: 1px;
  padding-right: 1px;
}

/* 去除底部白线 */
.el-table::before {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.menu_row {
}

/deep/ .active_dot-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-right: 3px;
}
/deep/ .active_dot_green-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: green;
}

/deep/ .active_dot_red-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: red;
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}

::v-deep .el-table .el-table__cell {
  padding: 0px 0px;
}

::v-deep .el-table .cell {
  padding: 0;
}

/deep/ .point-class {
  cursor: pointer;
}
</style>